@import './base.css';

#app {
  /* 让应用容器铺满浏览器宽度与高度 */
  width: 100%;
  min-height: 100vh;
  margin: 0; /* 去除居中 */
  padding: 0; /* 去除默认内边距，交由页面自行控制 */
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  /* 移除居中与网格分栏，避免内容被挤在中间 */
  body {
    display: block; /* 恢复默认流式布局 */
    place-items: initial; /* 取消居中 */
  }

  #app {
    display: block; /* 让页面根据自身布局铺满 */
    grid-template-columns: none;
    padding: 0; /* 由页面组件自己控制内边距 */
  }
}
